<template>
  <div>
    <a-input-search
      v-model="textVals"
      placeholder="请选择供应商"
      readOnly
      unselectable="on"
      @search="onSearchSuppliers"
    >
      <!-- <a-button slot="enterButton" :disabled="isDisabled">选择...</a-button> -->
    </a-input-search>

    <erp-supplier-list-modal ref="erpSupplierListModal" :modal-width="modalWidth" @supplierOk="selectOK" />
  </div>
</template>
<script>
import ErpSupplierListModal from './modal/ErpSupplierListModal.vue'

export default {
  name: 'SelectSupplierSingle',
  components: { ErpSupplierListModal },
  props: {
    modalWidth: {
      type: Number,
      default: 1250,
      required: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    value: {
      type: String,
      default: '',
      required: false,
    },
  },
  mounted() {
    this.textVals = this.value
  },
  watch: {
    value(val) {
      this.textVals = val
    },
  },
  data() {
    return {
      textVals: '',
    }
  },
  methods: {
    onSearchSuppliers() {
      this.$refs.erpSupplierListModal.showModal()
    },
    selectOK(rows) {
      this.textVals = ''
      if (rows) {
        this.textVals = rows.name
        this.$emit('onSuppliersSelected', rows)
      }
    },
  },
}
</script>
